<template>
    <div>
        <div class="top_header">
            <wd-header title="记忆法课程">
                <router-link to="/seriesvideo" slot="left">
                    <span class="iconfont">&#xe697;</span>
                </router-link>
            </wd-header>
        </div>
        <div class="videolist">
            <transition-group enter-active-class="animated fadeIn">
                <router-link ref="oneOf" class="oneOf" tag="div" v-for="(item,index) in datas" :key="index" :to="{ name:'singlevideo' , params:{title:item.title,likes:item.likes,time:item.create_time,views:item.views,videourl:item.videoUrl,imgurl:item.imgUrl,content:item.content,memory_id:item.memoryId,paytype:item.payType} }">
                    <div class="top">
                        <div class="left">
                            <img v-lazy="item.imgUrl" alt="加载中…">
                        </div>
                        <div class="right">
                            <div class="rightTop">
                              <span>{{item.title}}</span>
                              <i :class="[item.payType == 1 && item.full_price == 0 ? 'free' : (item.payType == 1 ? 'hadsubscribe' : 'unsubscribe')]">{{ item.payType == 1 && item.full_price == 0 ? '免费' : (item.payType == 1 ? '已订阅' : '订阅') }}</i>
                            </div>
                            <div class="rightMiddle">
                                <p>{{item.content.slice(0,15)}}...</p>
                            </div>
                            <div class="rightBottom">
                                <!-- 内容内容内容内容内容内容内容内容容内容内容容内容内容 -->
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottomLeft">
                            <i class="iconfont">&#xe612;</i>
                            <span>{{item.likes}}次点赞</span>
                        </div>
                        <span>{{item.views > 10000 ? (item.views/10000).toFixed(1)+'万' : item.views}}次播放</span>
                    </div>
                </router-link>
            </transition-group>
        </div>
        <div class="footer" v-if="isShow == 0">
            <button @click="buyAll">订阅所有记忆法课程</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'allvideolist',
    data() {
        return {
            datas: [],
            url: 'http://www.jydsapp.com/jydsApi/api/h5/video/getMemoryList',
            pageIndex: 1,
        }
    },
    computed: {
        lessonid() {
            return this.$store.state.video_indexto_allvideolist_data.lessonid
        },
        isShow(){
            return this.$store.state.video_indexto_allvideolist_data.paytype
        }
    },
    created() {
        this.getData()
    },
    beforeRouteLeave(to, from, next) {
        if (to.name === 'singlevideo' && to.params.paytype === 0) { //确认所进入路由是否已经购买
            let payinfo = {
                title: to.params.title,
                payid: to.params.memory_id,
                imgurl: to.params.imgurl,
                content: to.params.content,
                paytype: 2
            }
            this.$store.commit('saveVideoSinglePayData', payinfo)
            this.$router.push({
                name: 'singlevideopay'
            })
        } else if(to.name === 'singlevideo' && to.params.paytype != 0){
            let routeinfo = to.params
            this.$store.commit('saveSingleVideoNeedData', routeinfo)
            next()
        }else{
            next()
        }
    },
    methods: {
        buyAll() {
            this.$router.push({
                name: 'allvideopay'
            })
        },
        getData() {
            let auth = JSON.parse(localStorage.user)
            let str = `{"userPhone":"${auth.user.phoneNum}","token":"${auth.token}","pageIndex":${this.pageIndex},"lessonId":"${this.lessonid}"}`
            let toast = this.$Toast({
                content: '加载中…',
                autoClose: false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    toast.close()
                    this.datas = JSON.parse(res.data).getMemoryList
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                    this.$Toast({
                        content: res.message
                    })
                }
            }).catch((err) => {
                
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.animated {
    animation-duration: .5s;
}

.top_header{
    position:fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.videolist{
    margin: 1.296296rem 0;
}

.oneOf {
    display: flex;
    flex-direction: column;
    padding: 0.555556rem 0.37037rem 0 0.37037rem;
    border-bottom: 0.185185rem solid #f3f3f3;
    .top {
        display: flex;
        .left {
            flex: 1;
            img {
                width: 100%;
            }
        }
        .right {
            flex: 1;
            margin-left: 0.37037rem;
            .rightTop {
                display: flex;
                justify-content: space-between;
                span {
                    font-size: 0.444444rem;
                }
                .unsubscribe {
                    background: #fe4f4a;
                    color: #fff;
                    padding: 3px;
                    border-radius: 2px;
                }
                .hadsubscribe {
                    padding: 3px;
                    border: 1px solid #bebebe;
                    border-radius: 2px;
                    color: #434343;
                }
                .free{
                    padding: 3px;
                    border-radius: 2px;
                    background: #52d668;
                    color: #fff;
                }
            }
            .rightMiddle {
                margin: 5px 0;
                p {
                    font-size: 0.37037rem;
                    color: #2e2e2e;
                }
            }
            .rightBottom {
                color: #717171;
            }
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.185185rem 0;
        .bottomLeft {
            span {
                color: #666;
            }
        }
        span {
            color: #666;
        }
        i {
            color: #fe4f4a;
            font-size: 12px;
        }
    }
    &:last-child {
        margin-bottom: 1.296296rem;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #fff;
    padding: .1rem 0;
    button {
        width: 95%;
        height: 1.3rem;
        line-height: 1.3rem;
        font-size: .444444rem;
        background: #ff6633;
        color: #fff;
        border-radius: 5px;
    }
}
</style>
